<!--菜单管理-->
<template>
    <div>
        <el-card class="main-header" shadow="never">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input v-model="listQuery.name" size="medium" placeholder="请输入角色名称"></el-input>
                </el-col>
                <el-col :span="6" class="col">
                    <el-tooltip class="item" effect="dark" content="搜索" placement="top">
                        <el-button type="primary" icon="el-icon-search" size="medium" circle @click="search"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="重置" placement="top">
                        <el-button icon="el-icon-refresh" size="medium" circle @click="reset"></el-button>
                    </el-tooltip>
                </el-col>
                <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
        </el-card>
    
        <el-row class="btnRow">
            <el-col :span="24" class="colButton">
                <el-button type="success" icon="el-icon-plus" size="medium" @click.native="add()" circle></el-button>
                <el-button type="info" icon="el-icon-edit" size="medium"  @click.native="edit(currentRow)" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" size="medium" @click.native="remove(currentRow)" circle></el-button>
            </el-col>
        </el-row>
    
        <el-table
            :data="list"
            v-loading="listLoading"
            row-key="id"
            :tree-props="{children: 'children'}"
            element-loading-text="Loading"
            highlight-current-row
            @current-change="handleCurrentChange">
            <el-table-column label="菜单名称">
                <template slot-scope="scope">
                    {{scope.row.name}}
                </template>
            </el-table-column>
            <el-table-column label="组件">
                <template slot-scope="scope">
                    {{scope.row.component}}
                </template>
            </el-table-column>+
            <el-table-column label="路径">
                <template slot-scope="scope">
                    {{scope.row.path}}
                </template>
            </el-table-column>
            <el-table-column label="图标">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column label="描述">
                <template slot-scope="scope">
                    {{scope.row.description}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="" @click.native="add(scope.row.id)" v-if="!scope.row.pid && !scope.row.path">添加子菜单</el-button>
                    <el-button type="text" size="mini" icon="el-icon-edit" @click.native="edit(scope.row)">编辑</el-button>
                    <el-button
                        slot="reference"
                        type="text"
                        size="mini"
                        icon="el-icon-delete"
                        @click.native="remove(scope.row)"
                        style="margin-left: 10px;"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
    
        <el-dialog title="添加菜单" :visible.sync="dialogFormVisible" width="60%">
            <el-form :model="form">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="菜单名称" :label-width="formLabelWidth">
                            <el-input v-model="form.name" placeholder="请输入菜单名称" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="路径" :label-width="formLabelWidth">
                            <el-input v-model="form.path" placeholder="请输入菜单路径" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="组件" :label-width="formLabelWidth">
                            <el-input v-model="form.component" placeholder="请输入组件" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="图标" :label-width="formLabelWidth">
                            <el-popover
                                placement="bottom"
                                width="400"
                                trigger="click"
                                v-model="visible">
                                <icon-select @icon="getIcon"></icon-select>
                                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                                    <template slot="prefix">
                                        <i v-if="form.icon !== ''" :class="form.icon"></i>
                                    </template>
                                </el-input>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="描述" :label-width="formLabelWidth">
                            <el-input v-model="form.description" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script src="./menu.js"></script>

<style lang="scss" scoped>
@import '@/style/common.scss';
//div[data-v-0304e458] {
//    height: 400px;
//    overflow: auto
//}
</style>
